<!--  -->
<template>
  <DefaultLayout>
    <div class="bg-white">
      <div class="goods-detail pt-8">
        <el-breadcrumb class="mb-8" separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="goods-info">
          <div class="flex" v-loading="loading">
            <div class="goods-imgs mr-4">
              <GoodsImgs :imgs="goodsInfo.goodsPhoto" />
            </div>
            <div class="goods-spec ml-4 h-full">
              <div class="name">{{ goodsInfo.goodsName }}</div>
              <div style="color:red" class="my-4">{{ goodsInfo.pState }}</div>
              <div class="price-wrap">
                <div class="flex ml-4">
                  <p class="flex justify-center items-center">价格
                    <span class="price">￥{{ currentValue }}</span>
                  </p>
                </div>
              </div>
              <div class="spec-wrap">
                <template v-for="(value, key) in goodsInfo.spec" :key="key">
                  <div class="spec-title mt-2">{{ key }}</div>
                  <el-radio-group v-model="spec.data[key]" text-color="#ffffff" fill="#d0021b" class="gap-5 my-1">
                    <el-radio-button v-for="rvlaue in value" :label="rvlaue" :value="rvlaue" />
                  </el-radio-group>
                </template>
              </div>

              <div class="my-5 gap-4 flex">
                <el-input-number class="mr-3" v-model="num" size="large" />
                <el-button
                    size="large"
                    @click="handleClick"
                    :disabled="isDisabled()"
                    plain
                >
                  立即购买
                </el-button>
                <el-button @click="handleClickAddToCart" type="primary" size="large" :disabled="isDisabled()">
                  加入购物车
                </el-button>
              </div>
              <div v-if="stock >= 0" class="mt-5">当前库存 {{ stock > 0 ? stock : '不足' }}</div>
            </div>
          </div>
        </div>

        <div class="content flex my-6 gap-6 w-full">
          <div class="products_featured w-1/4">
            <div class="border-b-2 border-red-500 p-2">
              <p class="text-xl">推荐商品</p>
            </div>
            <div class="goods" v-loading="loadingRandom">
              <div v-for="item in randomGoods" :key="item.goodsId" class="cursor-pointer bg-slate-100 my-3 rounded-md flex">
                <img class="w-16 h-16 m-3 rounded" :src="item.goodsPhoto" />
                <div class="content p-2 flex flex-col justify-center gap-2">
                  <p class="text-xs font-semibold text-slate-600"> {{ item.goodsName}}</p>
                  <p class="text-red-600 text-xs"> ￥{{ item.minPrice }}</p>
                </div>
              </div>
              <a @click="freshRandomGoods()" class="text-xs cursor-pointer text-primary">换一批</a>
            </div>
          </div>

          <GoodsInfo class="flex-1" :goodsData="goodsInfo" />
        </div>
      </div>
    </div>

  </DefaultLayout>
</template>

<script lang='ts' setup>
import {onMounted, reactive, ref} from 'vue'
import { getGoodsDetail, getRandomGoods } from '../../apis/goods'
import DefaultLayout from '../../layouts/DefaultLayout.vue'
import GoodsInfo from './GoodsInfo.vue'
import GoodsImgs from './GoodsImgs.vue'
import { useRoute } from 'vue-router'
import {useCartStore} from "../../store/cartStore.ts";
import {useUserStore} from "../../store/user.ts";
import { useNavbarStore } from '../../store/navbar.ts'
import router from "../../router";

const cartStore = useCartStore();
const userStore = useUserStore();
const navbarStore = useNavbarStore()

document.getElementById('app').scrollTop = 0
const loading = ref(true)
const loadingRandom = ref(true)
const route = useRoute()
const num = ref(1)
const spec = reactive({
  data: {}
})
const goodsSpecsList = ref([])
const goodsInfo = ref({})

onMounted(() => {
  getData()
})

const randomGoods = ref([])

const stock = ref(-1)
const currentValue = ref(0);

async function getData() {
  const { data } = await getGoodsDetail(Number(route.params.id))
  data.spec = JSON.parse(data.goods.attributeList)
  goodsInfo.value = data.goods
  goodsInfo.value.spec = data.spec
  goodsSpecsList.value = data.goodsSpecs
  currentValue.value = data.goods.minPrice
  loading.value = false
}

const freshRandomGoods = () => {
  loadingRandom.value = true
  getRandomGoods(6)
      .then(res => {
        randomGoods.value = res.data
        if (res.code === 200)loadingRandom.value = false
      })
}
freshRandomGoods();

const isDisabled = () => {
  let res = goodsSpecsList.value.find(item =>  {
    let ok = item.goodsSpecs === JSON.stringify(spec.data)
    if (ok) {
      stock.value = item.goodsStock
      currentValue.value = item.goodsPrice
    }
    return ok
  })
  if (res == undefined) {
    stock.value = 0
    currentValue.value = goodsInfo.value.minPrice
  }
  if (Object.keys(spec.data) == 0) {
    stock.value = -1
    currentValue.value = goodsInfo.value.minPrice
  }

  return res == undefined || num.value > stock.value;
}
const handleClickAddToCart = async () => {
  if (! userStore.isLogin) {
    userStore.$patch({
      modalVisible : true
    })
    return
  }

  const res = goodsSpecsList.value.find(item => item.goodsSpecs === JSON.stringify(spec.data));
  await cartStore.addToCart({
    userId : userStore.id,
    cgNum : num.value,
    goodsSpecsId : res.gsId,
    cgPrice : res.goodsPrice * num.value
  })
  navbarStore.setShoppingCar(true)
}

const handleClick = async () => {
  if (! userStore.isLogin) {
    userStore.$patch({
      modalVisible : true
    })
    return
  }
  const res = goodsSpecsList.value.find(item => item.goodsSpecs === JSON.stringify(spec.data));
  await cartStore.addToCart({
    userId : userStore.id,
    cgNum : num.value,
    goodsSpecsId : res.gsId,
    cgPrice : res.goodsPrice * num.value
  })
  router.push({name: 'ShoppingCart'})
}
</script>

<style scoped>
.bg-fff {
  background: #fff;
}

.goods-detail {
  width: 1200px;
  margin: 0 auto;
}

.goods-spec {
  font-size: 14px;
}

.goods-spec .name {
  font-size: 22px;
  font-weight: bold;
}

.spec-wrap .spec-title {
  color: #414f59;
  margin-bottom: 8px;
}

.goods-spec .price-wrap {
  background: #fffbf1;
  width: 510px;
  padding: 12px 1px;
  display: flex;
  align-items: center;
}

.price-wrap .price {
  font-size: 32px;
  color: #f44336;
  margin: 0 10px;
}

.price-wrap .original-price {
  color: #878f90;
  text-decoration: line-through;
  font-size: 18px;
}

:deep(.el-radio-button .el-radio-button__inner) {
  background: #f5f6f6;
}

:deep(.el-input-number__decrease:hover) {
    color: #f44336;
}
:deep(.el-input-number__increase:hover) {
    color: #f44336;
}

.el-button.is-plain {
    --el-button-hover-text-color: white;
    --el-button-hover-bg-color: #d0021b;
    --el-button-hover-border-color: #d0021b;
}

.el-button--primary {
    --el-button-text-color: white;
    --el-button-bg-color: #d0021b; 
    --el-button-border-color: #d0021b;
    --el-button-hover-text-color: white;
    --el-button-hover-bg-color: #d0021b;
    --el-button-hover-border-color: #d0021b;
    --el-button-disabled-text-color: white;
    --el-button-disabled-bg-color: rgba(208,2,27,0.75);
    --el-button-disabled-border-color: rgba(208,2,27,0.75);
}

.el-button--primary :hover {
  background-color: rgba(208,2,27,1)
}
</style>
